<template>
	<view class="container">
		<view class="tab-cart view-router">
			<view v-if="list.length > 0">
				<view class="editor_head" style="border-bottom: 1px solid #f2f2f2;" @click="detail()" v-if="dig==true">
					<image src="/static/images/wybeizhu.png" mode="" class="van-icon "></image>
					<text>编辑</text>
				</view>
				<view class="editor_head" style="border-bottom: 1px solid #f2f2f2;" @click="detail()" v-if="dig==false">
					<image src="/static/images/wyshanchu.png" mode="" class="van-icon "></image>
					<text>完成</text>
				</view>
			</view>
			<view class="card-goods">
				<view class="card-goods__item" v-for="(item,index) in list" :key="index">
					<checkbox class='round blue van-checkbox' :class="item.checked?'checked':''" :checked="item.checked"
						value="C" @click="toggleItemChecked(item)"></checkbox>
					<view class="van-card" :class="{active:dig==true}">
						<view class="van-card__header">
							<view class="van-card__thumb">
								<view class="van-image">
									<image :src="item.picUrl" mode=""></image>
								</view>
							</view>
							<view class="van-card__content">
								<view>
									<view class="van-card__title">
										{{item.goodsName}}
									</view>
									<view>
										<view class="van-card__desc" style="margin-top: 5px;font-size: 14px;">
											<text class=""
												style="border: 1px solid #969799;padding: 0px 2px;color: #969799;font-size: 12px;margin-right: 7px;"
												v-for="(title,index) in item.specifications"
												:key="index">{{title}}</text>
										</view>
									</view>
								</view>
								<view class="van-card__bottom">
									<view class="van-card__price">
										<text>￥</text>
										<text style="font-size: 16px;">{{item.price}}.</text>
									</view>
									<view class="van-card__num">
										x{{item.number}}
									</view>
								</view>
							</view>
						</view>
						<view class="van-card__footer">
							<view style="text-align: right;" v-if="dig==true">
								添加时间 {{item.addTime}}
							</view>
							<view class="m-numSelector" v-if="dig==false">
								<view class="minus" @click="decreaseQuantity(item)"></view>
								<input type="number" v-model.number="item.number" min="1" />
								<view class="plus" @click="increaseQuantity(item)"></view>
							</view>
						</view>
					</view>
					<view class="cart_delete" v-if="dig==false" @click="del(item)">
						删除
					</view>
				</view>
			</view>
			<view class="is_empty" v-if="list.length < 1">
				<view style="margin-bottom: 20px;">
					<image src="http://47.104.167.34:9093/vue/static/img/is_empty.008b534a.png" mode=""></image>
				</view>
				<view>
					您的购物车空空如也~
				</view>
			</view>
			<view class="van-submit-bar" style="bottom: 50px;">
				<view class="van-submit-bar__bar">
					<checkbox class='round blue van-checkbox ' :class="checkbox[2].checked?'checked':''"
						:checked="checkbox[2].checked?true:false" value="C" style="padding: 0px 10px;"
						@click="selectAll()"></checkbox>全选
					<view class="van-submit-bar__text">
						<text>总计</text>
						<text class="van-submit-bar__price">
							￥<text style="font-size: 20px;">{{munbelieva}}</text>.00
						</text>
					</view>
					<button class="van-submit-bar__button--danger" style="border-radius: 50px;" @click="allDel()"
						:disabled="checkbox[2].checked?false:true">
						<view class="van-button__content">
							<text v-if="dig==true">结算</text>
							<text v-if="dig==false">删除</text>
						</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../static/request'
	export default {
		data() {
			return {
				checkbox: [{
					value: 'A',
					checked: true
				}, {
					value: 'B',
					checked: true
				}, {
					value: 'C',
					checked: false
				}],
				list: '',
				dig: true,
				munbelieva: 0,
				productIds: [],
				disabled: true,
				cartProdCount: 0 // 新增：用于存储购物车商品数量
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			del(item) {
				uni.showModal({
					content: '确认要删除选中的商品吗？',
					success: (res) => {
						if (res.confirm) { // 检查用户是否点击了确认按钮
							uni.showLoading({
								title: '加载中'
							});
							api.post('cart/delete', {
									productIds: [item.productId]
								})
								.then(res => {
									uni.hideLoading();
									this.getList();
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									}); // 显示成功提示
								})
								.catch(error => {
									uni.hideLoading();
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									}); // 显示失败提示
									console.error('删除商品时出错:', error);
								});
						}
					}
				});
			},
			// 批量删除
			allDel() {
				if(this.dig==true){
					uni.showModal({
						content: '确认要删除选中的商品吗？',
						success: (res) => {
							if (res.confirm) { // 检查用户是否点击了确认按钮
								uni.showLoading({
									title: '加载中'
								});
								api.post('cart/delete', {
										productIds: this.productIds
									})
									.then(res => {
										uni.hideLoading();
										this.getList();
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										}); // 显示成功提示
									})
									.catch(error => {
										uni.hideLoading();
										uni.showToast({
											title: '删除失败',
											icon: 'none'
										}); // 显示失败提示
										console.error('删除商品时出错:', error);
									});
							}
						}
					});
				} 
			},
			// 加
			increaseQuantity(item) {
				uni.showLoading({
					title: '加载中'
				});
				api.post('cart/update', {
					number: item.number + 1,
					goodsId: item.goodsId,
					id: item.id,
					productId: item.productId
				}).then(res => {
					console.log(res, '1');
					// 请求成功后隐藏加载提示
					uni.hideLoading();

					// 更新本地购物车列表中的商品数量
					const updatedList = this.list.map(listItem => {
						if (listItem.productId === item.productId) {
							return {
								...listItem,
								number: listItem.number + 1
							};
						}
						return listItem;
					});
					this.list = updatedList;

					// 重新计算合计金额
					this.calculateTotal();
				}).catch(error => {
					uni.hideLoading();
					console.error('增加商品数量时出错:', error);
				});
			},

			// 减
			decreaseQuantity(item) {
				// 判断商品数量是否为 1，如果为 1 则不进行减少操作
				if (parseInt(item.number) <= 1) {
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				api.post('cart/update', {
					number: item.number - 1,
					goodsId: item.goodsId,
					id: item.id,
					productId: item.productId
				}).then(res => {
					console.log(res, '1');
					// 请求成功后隐藏加载提示
					uni.hideLoading();

					// 更新本地购物车列表中的商品数量
					const updatedList = this.list.map(listItem => {
						if (listItem.productId === item.productId) {
							return {
								...listItem,
								number: listItem.number - 1
							};
						}
						return listItem;
					});
					this.list = updatedList;

					// 重新计算合计金额
					this.calculateTotal();
				}).catch(error => {
					uni.hideLoading();
					console.error('减少商品数量时出错:', error);
				});
			},
			detail() {
				this.dig = !this.dig
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				api.get('cart/index', {

				}).then(res => {
					console.log(res, '1')
					// 请求成功后隐藏加载提示
					uni.hideLoading();
					this.getBody(res.data.data.cartList.productId)
				})
			},
			getBody(productId) {
				uni.showLoading({
					title: '加载中'
				});
				api.get('cart/index', {
					productIds: [productId],
					isChecked: 0
				}).then(res => {
					console.log(res, '1')
					// 请求成功后隐藏加载提示
					uni.hideLoading();
					// this.list=res.data.data.cartList  
					this.list = res.data.data.cartList.map(item => ({
						...item,
						checked: false // 为每个商品项添加 checked 属性并初始化为 false
					}));
					// 提取商品 basketId 并存储到 productIds 数组中
					this.productIds = this.list.map(item => item.productId);

				})
			},
			// 处理单个商品的选中状态变化
			toggleItemChecked(item) {
				// 改变商品的选中状态
				item.checked = !item.checked;
				// 检查是否全选
				const allChecked = this.list.every(item => item.checked);
				this.checkbox[2].checked = allChecked;
				// 重新计算合计金额
				this.calculateTotal();
				// 获取当前选中的商品
				const checkedItems = this.list.filter(item => item.checked);
				if (checkedItems.length === 0) {
					// 如果没有选中的商品，将合计金额置为 0
					this.munbelieva = '0';
				} else {
					// 有选中商品，发起请求更新合计金额
					const selectedIds = checkedItems.map(item => item.productId);
					console.log(selectedIds, '000')
					uni.showLoading({
						title: '加载中'
					});
					api.post('cart/checked', {
						productIds: selectedIds,
						isChecked: 1
					}).then(res => {
						console.log(res, '87878')
						// 请求成功后隐藏加载提示
						uni.hideLoading();
						// this.munbelieva = res.data.data.cartTotal.checkedGoodsAmount; 
					})
				}
			},
			// 新添加的全选点击事件处理函数
			selectAll() {
				// 先将全选复选框状态取反
				this.checkbox[2].checked = !this.checkbox[2].checked;
				if (this.checkbox[2].checked) {
					// 全选操作
					uni.showLoading({
						title: '加载中'
					});
					api.post('cart/checked', {
						productIds: this.productIds,
						isChecked: 1
					}).then(res => {
						console.log(res, '87878')
						// 请求成功后隐藏加载提示
						uni.hideLoading();
						this.munbelieva = res.data.data.cartTotal.goodsAmount;
					})
				} else {
					// 取消全选操作，重置金额
					this.munbelieva = '0';
				}
				// 遍历商品列表中的每个商品项，将其对应的复选框状态设置为和全选复选框一致
				this.list.forEach(item => {
					item.checked = this.checkbox[2].checked;
				});
				// 重新计算合计金额等相关操作（如果有相关逻辑依赖复选框选中状态来计算的话）
				this.calculateTotal();
			},
			// 金额
			calculateTotal() {
				let total = 0;
				this.list.forEach(item => {
					if (item.checked) {
						total += item.price * item.number;
					}
				});
				// 这里假设页面上有个地方用于展示合计金额，对应的数据绑定变量名为totalPrice，需要根据实际情况调整
				this.munbelieva = total.toString();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/serve/serve.css";
</style>